import './Scss/index.scss'
import { useState, useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { useSessionStorageState } from 'ahooks'

import { BasicSettings, RouterSlice, RouterHandle, Time, TopSwitch } from '../Assets/Common/Common'
import { PageNav, HomeNav } from './Data'

import { project } from '../../../Common/Data'
const { imageUrl, title } = project[window.location.hostname]

const NavList = {
    Home: HomeNav,
    Page: PageNav,
}

const Index = () => {
    BasicSettings({ title, imageUrl })
    const Navigate = useNavigate()
    const { pathname, search } = useLocation()
    const [UserInfo] = useSessionStorageState('UserInfo')

    const [NavType, setNavType] = useState()

    const [currentPath, setCurrentPath] = useState()

    useEffect(() => {
        // 路由跳转
        const { two, thr } = RouterSlice(pathname)
        if (two === 'Page') {
            setCurrentPath(RouterHandle(pathname, PageNav))
            setNavType('Page')
        } else {
            if (thr !== 'province') {
                setCurrentPath(RouterHandle(pathname, HomeNav))
                setNavType('Home')
            } else {
                setNavType()
            }
        }
    }, [pathname])

    const NavBack = () => {
        Navigate('/Front')
    }

    return (
        <div className="jtgjBody">
            <img className="Back" src={imageUrl + 'LoginBack.png'} alt="" />
            <img className="Nav" src={imageUrl + 'Nav.png'} alt="" />
            <img className="Btm" src={imageUrl + 'btm.png'} alt="" />
            <div className="NavBox">
                <div>
                    <div className="CallBack" onClick={NavBack}>
                        {pathname !== '/Front' &&
                            ((RouterSlice(pathname).two === 'Page' &&
                                UserInfo.userOrganizationIdentityLevels.includes('9')) ||
                                RouterSlice(pathname).two === 'Other') &&
                            '返回首页'}
                    </div>
                    <div>
                        <Time one="YYYY-MM-DD dddd" two="HH:mm:ss" />
                    </div>
                </div>
                <div>{title}</div>
                <div>
                    <div>黑龙江哈尔滨市 12°C 晴</div>
                    <TopSwitch one="进入后台" two="退出系统" />
                </div>
                {/* 一级导航 */}
                {NavType && (
                    <div className="NavList">
                        {NavList[NavType].map(({ path, title, child }) => (
                            <div
                                key={path}
                                className={title === currentPath?.title ? path + ' active' : path}
                                onClick={() => {
                                    // if (path === 'Ele') window.open('https://www.hljgskf.com/s/kb/main')
                                    // else
                                    path !== 'station' && Navigate(child[0].path + search)
                                }}
                            >
                                <div>{title}</div>
                            </div>
                        ))}
                    </div>
                )}
                {currentPath?.child.length > 1 && (
                    <div className="NavTow">
                        {currentPath.child.map(({ path, title }) => (
                            <div
                                key={path}
                                className={path.includes(currentPath.url) ? 'active' : ''}
                                onClick={() => path !== 'station' && Navigate(path + search)}
                            >
                                {title}
                            </div>
                        ))}
                    </div>
                )}
            </div>
            <div className="IndexOutlet">
                <Outlet />
            </div>
        </div>
    )
}

export default Index
